<template>
  <div class="main">
    <div class="tab border-bottom">
      <span class="select"><router-link tag="div" to="/cir/hots">热门</router-link></span>
      <span ref="box"><router-link class="tails" tag="div" to="/cir/dts" @click.native="showSel">动态&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-caret-bottom"></i>
        <transition name="el-fade-in-linear">
          <router-link tag="div" v-show="downSelect" class="child" to="/cir/with">
              关注
          </router-link>
        </transition>
      </router-link></span>
      <span><router-link tag="div" to="/cir/hds">问答</router-link></span>
    </div>
    <router-view></router-view>

  </div>
</template>
<script>
export default {
  name: "CirMain",
  data(){
    return {
      downSelect:false
    }
  },
  created(){
    document.addEventListener('click',(e)=>{
      let state = this.$refs.box.contains(e.target)

        if(!state){
            this.downSelect = false;
        }
    })
  },
  methods:{
    showSel(){
      this.downSelect=!this.downSelect;
    }
  },
  watch:{
    $route(val){
      let url = val.path;
      if(url=="/cir/dts"){
        this.downSelect = true;
      }else{
        this.downSelect = false;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~styles/variables';

.main {
  width: 9.6rem;

  .tab {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 0.2rem;
    font-size:0.18rem;
  }

  .tab span {
    height: 0.6rem;
    line-height: 0.66rem;
    // width: 2.55rem;
    width:220px;
    text-align: center;
    cursor: pointer;
  }

  .tab span a {
    color: #333;
  }

  .tab span .current {
    background-color: $logoColor;
    color: #fff;
    cursor: pointer;
  }

  .iconfont {
    margin-right: 0.05rem;
  }
}
.tails{
  position:relative;
  .child{
    position:absolute;
    top:64px;
    left:0;
    background:#dedede;
    z-index:2;
    width: 100%;
    border-top:1px solid #dedede;
    color:#666;
  }
  .child:hover{
    background:#f9ce3c;
    border-top:1px solid #fff;
    color:#fff;
  }
}
</style>
